vue 过滤器

一、vue 过滤器

简介

vue 没有提供内置过滤器，有时候需要在视图中对数据进行一些格式化处理，可以自己封装一些常用过滤器来使用。

• 作用：格式化输出模版中的数据, 其本质就是一个函数
• 注意：只能在插值表达式中使用
• 分类：全局过滤器与局部过滤器

使用

• 通过管道符|来调用不同的过滤器

• 使用语法：

  // 左边的数据会通过管道流向右边进行处理。
  {{ value | date | json | uppercase | ... }}

• 传参语法:

  {{ value | date('YYYY-MM-DD') }}

定义

• 全局过滤器
  • Vue.filter(name, fn)
  • 任何Vue实例所关联的视图中都可以使用
• 局部过滤器
  • new Vue({ filters: { name1: fn, name2: fn } })
  • 只能在当前实例所关联的视图中使用

基本使用

<span>{{ time | formatDate }}</span>

// 过滤器回调的第一个值固定为插值表达式中的初始值
Vue.filter('formatDate', function(time) {
    let date = new Date(time);
  // 此处返回什么，管道就会流出什么
    return `${ date.getFullYear() }-${ date.getMonth() + 1 }-${ date.getDate() }`;
});

使用参数

<span>{{ time | formatDate('YYYY-MM-DD') }}</span>

// 过滤器回调的第一个值固定为插值表达式中的初始值，后面为用户指定的参数
Vue.filter('formatDate', function(val, format) {

    // 先创建匹配年月日的三个不同正则
    let yReg = /YYYY/i;
    let mReg = /MM/i;
    let dReg = /DD/i;

    // 然后通过val得到相应的年月日
    let date = new Date(val);
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();

    // 最后替换
    return format.replace(yReg, y).replace(mReg, m).replace(dReg, d);
});